基于Bootstrap3所见即所得的jQuery文本编辑器插件 |
您所在的位置:网站首页 › bootstrap 编辑器 › 基于Bootstrap3所见即所得的jQuery文本编辑器插件 |
bootstrap3-wysiwyg是一款简单实用的基于Bootstrap3所见即所得的jQuery文本编辑器插件。该文本编辑器使用简单,支持多国语言,适用于需要简单文本编辑的场合。 使用方法使用该文本编辑器插件需要引入jQuery、Bootstrap3相关文件以及bootstrap3-wysihtml5.min.css和bootstrap3-wysihtml5.all.min.js文件。 HTML结构你可以使用一个元素来作为该文本编辑器的容器。 初始化插件在页面DOM元素初加载完毕之后可以通过wysihtml5()方法来初始化该文本编辑器插件。 $('#some-textarea').wysihtml5(); 配置参数可以在初始化的时候在wysihtml5()中插入一个参数对象来配置文本编辑器。 $('#some-textarea').wysihtml5({someOption: 23, ...}) 按钮要设置工具栏上的按钮可以使用下面的参数: $('#some-textarea').wysihtml5({ toolbar: { "font-styles": true, //Font styling, e.g. h1, h2, etc. Default true "emphasis": true, //Italics, bold, etc. Default true "lists": true, //(Un)ordered lists, e.g. Bullets, Numbers. Default true "html": false, //Button which allows you to edit the generated HTML. Default false "link": true, //Button to insert a link. Default true "image": true, //Button to insert an image. Default true, "color": false, //Button to change color of font "blockquote": true, //Blockquote "size": //default: none, other options are xs, sm, lg } }); Font Awesome字体图标要在工具栏中使用Font Awesome字体图标,可以如下配置: toolbar: { "fa": true } 自定义模板要自定义工具栏的按钮模板,可以参考这里。 事件Wysihtml5文本编辑器提供了一些可用的事件。事件的使用方法如下: var editor = new wysihtml5.Editor("textarea-id"); // observe function onChange() { alert("The content of the editor has changed"); }; function onLoad() { alert("Go!"); }; editor.on("change", onChange); editor.on("load", onLoad); // unobserve editor.stopObserving("onChange", onChange); editor.stopObserving("onLoad", onLoad);或者: $('#some-textarea').wysihtml5({ "events": { "load": function() { console.log("Loaded!"); }, "blur": function() { console.log("Blured"); } } });可用的事件有: load:文本编辑器完全加载之后触发。 beforeload:仅用于内部使用。 focus:当文本编辑器获取焦点的时候触发。 focus:composer:当富文本视图获取焦点时触发。 focus:textarea:当source view获取焦点时触发。 blur:当文本编辑器失去焦点的时候触发。 blur:composer:当富文本视图失去焦点时触发。 blur:textarea:当source view失去焦点时触发。 change:当值改变时触发。 change:composer:当富文本视图中的值改变时触发。 change:textarea:当source view的值改变时触发。 paste:当用户粘贴或拖拽时触发。 paste:composer:当用户粘贴或拖拽到富文本区域时触发。 paste:textarea:当用户粘贴或拖拽到source view区域时触发。 newword:composer:当用户在富文本区域输入新的单词时触发。 destroy:composer:当富文本区域被移除时触发。 change_view:当在源文件视图和富文本视图之间切换时触发。 show:dialog:当工具栏显示时触发。 save:dialog:当工具栏对话框被点击的时候触发。 cancel:dialog:当工具栏对话框被取消的时候触发。 undo:composer:当用户调用undo操作时触发。 redo:composer:当用户调用redo操作时触发。 beforecommand:composer:当用户通过富文本命令来格式化前触发。 aftercommand:composer:当用户通过富文本命令来格式化后触发。关于该文本编辑器插件更多的信息可以参考:https://github.com/bootstrap-wysiwyg/bootstrap3-wysiwyg |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |